<template>
  <view style="padding:50rpx;">
    <view style="height:150rpx;"></view>
    <view class="gui-flex gui-row gui-justify-content-center">
      <!-- <text
				class="login-logo gui-icons gui-color-white gui-bg-orange gui-block gui-border-box  gui-box">&#xe620;</text> -->
      <image src="../../static/images/logo_02.png" mode="widthFix" style="width: 300rpx;"></image>
    </view>
    <view style="margin-top:80rpx;">
      <form @submit="submit">
        <view>
          <text class="gui-text-small gui-color-gray">账号</text>
        </view>
        <view class="gui-border-b">
          <input type="number" class="gui-form-input" v-model="phoneno" name="phoneno" placeholder="账号/手机号" />
        </view>
        <view class="gui-margin-top">
          <text class="gui-text-small gui-color-gray">{{type=='phone'?'验证码':'密码'}}</text>
        </view>
        <view class="gui-border-b gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
          <input type="number" class="gui-form-input gui-flex1" name="pwd" value="999999"
            :placeholder="type=='phone'?'验证码':'密码'" />
          <text class="sendmsg gui-block gui-border-l gui-text-right gui-primary-color" v-if="type=='phone'"
            @tap="getVCode">{{vcodeBtnName}}</text>
        </view>
        <view class="gui-margin-top gui-flex gui-rows gui-space-between" hover-class="gui-tap">
          <text></text>
          <text class="gui-text gui-color-gray gui-block gui-text-right" v-if="type=='password'"
            @tap="type='phone'">验证码登录</text>
          <text class="gui-text gui-color-gray gui-block gui-text-right" v-if="type=='phone'"
            @tap="type='password'">密码登录</text>
        </view>
        <view style="margin-top:38rpx;">
          <button type="default" class="gui-button gui-bg-green gui-noborder" formType="submit"
            style="border-radius:50rpx;">
            <text class="gui-color-white gui-button-text">登 录</text>
          </button>
        </view>
      </form>
    </view>

    <view class="gui-flex gui-row gui-nowrap gui-align-items-center" style="margin-top:80rpx;">
      <view class="gui-title-line"></view>
      <text class="gui-primary-color gui-h6" style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
      <view class="gui-title-line"></view>
    </view>
    <view class="gui-flex gui-row gui-nowrap gui-justify-content-center gui-margin-top" @click="wchatLogin">
      <view class="other-login-icons" hover-class="gui-tap">
        <text class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>
      </view>

    </view>
  </view>
</template>
<script>
  import graceChecker from "@/Grace6/js/checker.js";
  export default {
    data() {
      return {
        phoneno: '18888888888',
        vcodeBtnName: "发送验证码",
        countNum: 120,
        countDownTimer: null,
        type: "password"
      }
    },
    methods: {
      loginbypwd: function() {
        this.type = this.type == 'password' ? 'phone' : 'password';
      },
      getVCode: function() {
        var myreg = /^[1][0-9]{10}$/;
        if (!myreg.test(this.phoneno)) {
          uni.showToast({
            title: '请正确填写手机号码',
            icon: "none"
          });
          return false;
        }
        // 手机号码为 :  this.phoneno
        // vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
        if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送') {
          return;
        }
        this.vcodeBtnName = "发送中...";
        // 与后端 api 交互，发送验证码 【自己写的具体业务代码】
        // 假设发送成功，给用户提示
        uni.showToast({
          title: '短信已发送，请注意查收',
          icon: "none"
        });
        // 倒计时
        this.countNum = 60;
        this.countDownTimer = setInterval(() => {
          this.countDown();
        }, 1000);
      },
      countDown: function() {
        if (this.countNum < 1) {
          clearInterval(this.countDownTimer);
          this.vcodeBtnName = "重新发送";
          return;
        }
        this.countNum--;
        this.vcodeBtnName = this.countNum + '秒重发';
      },
      submit: function(e) {

        var formData = e.detail.value;

        var rule = []

        if (this.type == 'phone') {

          rule = [{
              name: "phoneno",
              checkType: "phoneno",
              checkRule: "",
              errorMsg: "手机号码有误"
            },
            {
              name: "code",
              checkType: "string",
              checkRule: "",
              errorMsg: "短信验证码错误"
            },
          ];

        }

        var checkRes = graceChecker.check(formData, rule);
        if (checkRes) {

          uni.gRequest.get('login/phone', formData).then(data => {

            console.log('09999999', data.data);



            uni.setStorageSync("userInfo", data.data);
            uni.switchTab({

              url: '/pages/switchPages/user'
            })

          });


        } else {
          uni.showToast({
            title: graceChecker.error,
            icon: "none"
          });
        }
      },
      wchatLogin() {
        uni.login({
          provider: 'weixin',
          success(res) {
            uni.gRequest.get("/app/wchat/login", {
              code: res.code
            }).then(result => {

              uni.showToast({
                title: '登录成功',
                icon: "none"
              });

              uni.setStorageSync("userInfo", result.data);
              uni.redirectTo({
                url: '/pages/switchPages/index'
              })
            });

          }
        })
      }
    }
  }
</script>
<style scoped>
  .login-logo {
    width: 180rpx;
    height: 180rpx;
    font-size: 80rpx;
    text-align: center;
    line-height: 120rpx;
    padding: 30rpx;
    border-radius: 18rpx;
  }

  .other-login-icons {
    width: 88rpx;
    height: 88rpx;
    text-align: center;
    font-size: 70rpx;
    margin: 20rpx;
  }

  .sendmsg {
    height: 30rpx;
    width: 200rpx;
    font-size: 24rpx;
    line-height: 30rpx;
  }
</style>
